<!-- 选择地址 -->
<template>
    <view class="address" :class="formData.locationText ? 'address-cur' : ''" @click="addressFn()">
        <img src="@/assets/image/icon44.png" alt="" v-if="!formData.locationText">
        <img src="@/assets/image/icon03.png" alt="" v-else><text>{{ formData.locationText ? formData.locationText : "选择地区" }}</text><img @click="closeFn()" class="close-btn" src="@/assets/image/icon46.png" alt="" v-if="formData.locationText">
    </view>
</template>

<script setup>
import { toRefs } from "vue";
import { reactive, ref, getCurrentInstance, onMounted } from "vue"

const emits = defineEmits(['on-close','update:addressValue'])

const state = reactive({
    formData: {
        "locationText":"",
        "longitude":null,
        "latitude":null,
    },
})
let { formData } = toRefs(state)
const addressFn = () => {
    navigator.geolocation.getCurrentPosition(function (position) {
        AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                state.formData.locationText = result.city
                state.formData.longitude = result.bounds.northEast.lng
                state.formData.latitude = result.bounds.northEast.lat
                emits("update:addressValue",state.formData)
                // 查询成功，result即为当前所在城市信息
            }else{
                uni.showToast({
                    title:"地址获取失败",
                    icon:"none"
                })
            }
        })
    })
    })
    // if (navigator.geolocation) {
    //     navigator.geolocation.getCurrentPosition(function (position) {
    //         console.log(position,'position2222')
    //     })}
    
}

const closeFn = () => {
    state.formData.locationText = ""
    state.formData.longitude = null
    state.formData.latitude = null
    emits("on-close")
}



</script>

<style lang="scss" scoped>
.address{
    display: flex;
    width: max-content;
    border-radius: 44rpx;
    align-items: center;
    padding:0 16rpx;
    height: 44rpx;
    background: #F4F4F4;
    color:#666666;
    font-size: 24rpx;
    img{
        width: 28rpx;
        height: 28rpx;
        margin-right: 5rpx;
    }
    .close-btn{
        width: 20rpx;
        height: 20rpx;
    }
}
.address-cur{
    background: #E8EDFF;
    color: #0036F6;
    
}
</style>
